<script setup lang="ts">
import { reactive, ref ,watch } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { createApi,editApi } from '../../../services';
import type {userItem} from '../../../services/type'
//  const visible = defineModel('visible')\
//接受父组件传过来的参数
interface Props {
    visible:boolean
    editList:userItem | null
}

// 接受父组件传过来的自定义事件
interface Emits {
    'update:visible':[visible:boolean]
    'refresh':[]
}

// 初始化弹窗变量
const initForm = {
    username:'',
    password:'',
    sex: 1,
    age: 18,
    email:''

}
const props = defineProps<Props>() 
const emits = defineEmits<Emits>()
// 实例化对象  element组件
const formRef = ref<FormInstance>()
// 定义form数据
const form = ref(initForm)


// 弹窗表格检验规则
const rules = reactive({
    username: [
        { required: true, message: '请输入用户名' },
    ],
    password: [
        { required: true, message: '请输入密码' },
    ],
    sex: [
        { required: true, message: '请选择性别' },
    ],
    age: [
        { required: true, message: '请输入年龄' },
        { type: 'number', message: '年龄必须是数字' },
    ],
    email:[
        { required: true, message: '请输入邮箱' },
        { type: 'email', message: '邮箱格式错误' },
    ]

})
// 新增接口
const createList = async () => {
    const res = await createApi(form.value)
    // console.log(res.data)
    if(res.data.code === 0) {
        ElMessage.success('创建成功')
        emits('update:visible',false)
        emits('refresh')
    } else {
        ElMessage.error(res.data.msg)
    }
}
// 编辑接口
const editListApi = async () => {
    const res = await editApi({
        ...form.value,
        id:props.editList!.id,
    })
    if(res.data.code === 0) {
        ElMessage.success('更新成功')
        emits('update:visible',false)
        emits('refresh')
    } else {
        ElMessage.error(res.data.msg)
    }

}
 
// 提交按钮
const submit = () => {
    formRef.value?.validate(valid => {
        if(valid) {
            //没有编辑数据  走新增接口
            if(!props.editList) {
                createList()

            }else {
                editListApi()
            }   
        }
    })
}
// 监听 visible 改变
watch(() => props.visible,
    () => {
        if(props.visible) {
            // 如果visible 弹窗 为真  
            if(props.editList !== null) {
                // 将编辑传过来的数据赋值给form
                form.value = { ...props.editList }
            }
        }else {
            formRef.value?.resetFields()
            form.value =  {...initForm }
        }
    })


</script>

<template>
    <!-- v-model="visible" -->
    <el-dialog 
    :model-value = "visible"
    @close="emits('update:visible',false)"
    :title="editList? '编辑用户' : '新增用户'"
    >
        <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="auto"
        >
            <el-form-item label="姓名" prop="username">
                <el-input v-model.number="form.username"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model.number="form.password"/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option label="男" :value="1" />
                    <el-option label="女" :value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model.number="form.age"/>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model.number="form.email"/>
            </el-form-item>
        </el-form>


        <template #footer>
            <el-button @click="emits('update:visible',false)">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>

</style>